<template>
  <div id="app">
      <navSimple></navSimple> 
      <div class="floatContent" v-show="showFloat" >
             <router-view :message="listRequest" v-on:closeevent="showFloatBox()" v-on:loginSuccess="loginCallBack()">
             </router-view>
       </div>
      <div class="userbox">
        <div class="nameCon">
           <div class="userImage">
              <div class="imageCon">
                <i class="iconfont icon-accountfilling"></i>
              </div>
           </div>
           <div class="infoCon">
             <span class="name">
             wellwell
             </span>
             <span>
               金牌用户
             </span>

           </div>
        </div>
      </div> 
      <div class="userInfoBox mainBox">
        <div class="title">
          用户中心
        </div>
        <div class="infoBox">
          <div class="changePw innerCon" @click="clickToDo('/changePassword')">
           <i class="iconfont icon-password"></i><br/>
            <span>修改密码</span>
          </div>
          <div class="changeData innerCon" @click="clickToDo('/changeData')">
             <i class="iconfont icon-edit"></i><br/>
             <span>修改资料</span>
          </div>
        </div>
      </div>
      <div class="orderBox mainBox">
        <div class="title">
          订单
        </div>
        <div class="infoBox">
          <div class="waitingFPay innerCon" @click="clickToDo('/unpayed')">
           <i class="iconfont icon-dollar" ></i><br/>
            <span>代付款</span>
          </div>
          <div class="allOrder innerCon"  @click="clickToDo('/allOrder')">
             <i class="iconfont icon-code"></i><br/>
             <span>全部</span>
          </div>
        </div>
      </div>
    
      
  </div>

</template>

<script>
import 'common/css/reset.css';
import navSimple from"components/units/navSimple.vue";

var _user=require("common/util/server/userServer.js");


  var _mm=require('common/util/mm.js');
  export default {
    name: 'app',
    watch:{
       '$route' (to, from) {
      // 对路由变化作出响应...
            if (to.path === "/") {
              this.showFloat=false;
            }

    },
    },
    data(){
      return {
        username:"",
        showFloat:false,
        listRequest:""

      }
    },
    created(){
     let _this= this;

     _user.getUserInfo(
      function(res){
        _this.username=res.data.username;
      },function(err){
        _this.showFloat= true;
        _this.$router.push("/login");
      }
     )

     

    },
    methods:{
      showFloatBox(){
        this.showFloat=false
      },
      loginCallBack(){
        let _this=this
        this.showFloat=false;
         _user.checkLogin(
      function(res){
        _this.username=res.data.username;
      },function(err){
     
        _this.$router.push("/login");
           _this.showFloat= true;
      }
     )
      },

      clickToDo(where){
        let comp= where;
        let _this=this;
        if (where === "/unpayed" || where === "/allOrder") {
          console.log("innder")
           comp ="/orderList";
          this.listRequest =where;

        }
        _user.checkLogin(function(res){
        _this.$router.push(comp);
        _this.showFloat= true;
        },function(err){
           _this.$router.push("/login");
        _this.showFloat= true;
        })

        
      }
    },

    components: {
    navSimple
    }
  }
</script>

<style lang='stylus'>
#app
  background:rgb(231,232,237)
  .userbox
    background:#fff
    width:100%
    height:140px
    padding:10px
    box-sizing:border-box
    .nameCon
      background:linear-gradient(to right,rgba(222,64,43,1), rgba(222,64,43,.4))
      height:120px
      display:flex
      .userImage
        flex:1
        height:120px
        text-align:center
        line-height:120px
        .imageCon
          display:inline-block
          border:1px solid #686868
          height:50px
          width:50px
          font-size:30px
          line-height:46px
          text-align:center
          border-radius:50%
          color:#bfbfbf
          .iconfont
            font-size:30px
      .infoCon
        flex:2
        text-align:center
        padding:10px
        .name
          font-size:24px
          color:white
          line-height:60px
        span
          font-size:16px
          display:block
          color:#f2f536
  .mainBox
    height:100px
    width:100%
    background:white
    padding:10px
    margin-top:10px
    box-sizing:border-box
    .title
      width:100%
      height:20px
      font-size:18px
      color:#333
      border-bottom:.5px solid #bfbfbf
    .infoBox
      width:100%
      height:80px
      display:flex
      .innerCon
        flex:1
        height:80px
        text-align:center
        margin-top:10px
        font-size:18px
        color:#666
  .floatContent
    position:fixed
    left:0
    top:0
    height:100%
    width:100%
    overflow:scroll
    background:white




</style>
